<template>
	<view class="">
		<hx-navbar title="商家" :back="true" :fixed="true" :backgroundColor="[255, 255, 255]">
		</hx-navbar>
		<view class="mian-top" @tap="hideModal">
			<view>
				<navigator url="../search/search" hover-class="none" style="display: flex;justify-content: center;background-color: #FFFFFF;">
					<view class="weui-cell__bd">
						<view class="cuIcon-search">
						</view>
						<input class="weui-input" name="input" placeholder-class="placeholder-input" placeholder="输入商家名称关键字搜索" />
					</view>
				</navigator>
			</view>
		</view>
		<view class="flex align-center " style="margin: 35rpx; 0 50rpx 23rpx">
			<view class="sort">
				智能排序 <i class="fa fa-sort-desc" aria-hidden="true"></i>
			</view>
			<view class="sort">
				销量 <i class="fa fa-sort-desc" aria-hidden="true"></i>
			</view>
			<view class="sort" style="margin-right: 45rpx;">
				筛选 <i class="fa fa-caret-up" aria-hidden="true"></i>
			</view>
		</view>
		<view class="flex shop-top justify-between">
			<view class="flex shop-top-main">
				<view class="shop-img">
					<image src="../../static/imgs/jidiimg.png" mode="aspectFit"></image>
				</view>
				<view class="shop-content">
					<view class="name">
						沐阳县盛农苗木有限公司
					</view>
					<view class="text-number text-sm">
						月销3456 商品470
					</view>
					<view class="address text-sm">
						<i class="fa fa-map-marker" aria-hidden="true"></i>江苏省宿迁市沐阳县新河镇
					</view>
					<view class="bianqian flex">
						<text class="cu-tag line-red sm radius">国王会员</text>
						<text class="cu-tag line-yellow sm radius">企业认证</text>
						<text class="cu-tag line-blue sm radius">实名认证</text>
					</view>
					<view class="bianqian flex">
						<text class="cu-tag sm radius advertising">“桃子、苹果、梨，新鲜上市”</text>
					</view>
				</view>
			</view>
			<view class="shop-button flex align-center" style="">
				<view class="radius bg-cyan shadow">
					进入店铺
				</view>
			</view>
		</view>
		<view class="flex shop-top justify-between">
			<view class="flex shop-top-main">
				<view class="shop-img">
					<image src="../../static/imgs/shop1.png" mode="aspectFit"></image>
				</view>
				<view class="shop-content">
					<view class="name">
						沐阳县盛农苗木有限公司dsf 
					</view>
					<view class="text-number text-sm">
						月销3456 商品470
					</view>
					<view class="address text-sm">
						<i class="fa fa-map-marker" aria-hidden="true"></i>江苏省宿迁市沐阳县新河镇
					</view>
					<view class="bianqian flex">
						<text class="cu-tag line-red sm radius">国王会员</text>
						<text class="cu-tag line-yellow sm radius">企业认证</text>
						<text class="cu-tag line-blue sm radius">实名认证</text>
					</view>
					<view class="bianqian flex">
						<text class="cu-tag sm radius advertising">“专注芒果种植，绿色无公害”</text>
					</view>
				</view>
			</view>
			<view class="shop-button flex align-center">
				<view class="radius bg-cyan shadow">
					进入店铺
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import 'static/css/font-awesome.min.css';
	export default {
		    data() {
		        return {
					
				}
			}
	}
</script>

<style>
	.mian-top {
		width: 100%;
		height: 60rpx;
		z-index: 10;
		background-color: #FFFFFF;
	}
	.weui-cell__bd {
		width: 94%;
		border-radius: 50rpx/50rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		border: #FFFFFF 1rpx solid;
		background-color: #F5F5F5;
		color: #CECDCD;
	}
	
	.weui-cell__bd .cuIcon-search {
		margin: 0 30rpx;
	}
	.placeholder-input {
		color: #CECDCD;
	}
	
	.weui-input {
		line-height: 60rpx;
		width: 85%;
		height: 60rpx;
		font-size: 24rpx;
		color: #CECDCD;
	}
	
	
	.sort {
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 75rpx;
	}
	
	.sort i {
		position: relative;
		left: 8rpx;
	}
	.sort .fa-sort-desc{
		top: -6rpx;
	}
	.sort .fa-caret-up{
		top: 0rpx;
	}
	
	/* 内容 */
	.shop-top {
		padding: 30rpx;
		border-bottom: 2rpx #F5F5F5 solid;
		margin-bottom: 30rpx;
	}
	.shop-top-main{
		width: 80%;
	}
	.shop-top image {
		width: 128rpx;
		height: 128rpx;
		border-radius: 15rpx;
	}
	.shop-content {
		width: 75%;
		padding: 0rpx 20rpx;
	}
	.shop-content .name {
		font-size: 36rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.address{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.address i{
		margin-right: 8rpx;
	}
	.shop-button view {
		width: 130rpx;
		height: 53rpx;
		border-radius: 50rpx;
		background-color: #26C594;
		color: #FFFFFF;
		line-height: 53rpx;
		text-align: center;
		font-size: 22rpx;
		margin-top: 10rpx;
		
	}
	.shop-button view i{
		margin-right: 20rpx;
	}
	.shop-content .text-sm {
		color: #666;
	}
	
	.shop-content>view+view {
		margin-top: 10rpx;
	}
	.cu-tag.sm {
		position: relative;
		left: -8rpx;
		height: 40rpx;
		transform: scale(0.9);
	}
	.cu-tag+.cu-tag {
		margin-left: 15rpx;
	}
	.line-blue {
		color: #22AFF8;
	}
	.cu-tag.sm.advertising{
		color: #26C594;
		background-color: #E4FFF7;
	}
</style>
